<template>
  <div class="wrapper">
    <div
      v-magnifier
      class="img-wrap"
      :style="{
        width: imgWidth + 'px',
        height: imgHeight + 'px',
      }"
    >
      <!-- 放大镜框图片 -->
      <a
        class="mag-wrap"
        :href="link"
        :target="blank ? '_blank' : ''"
        :style="{
          width: magWidth + 'px',
          height: magHeight + 'px',
        }"
      >
        <img
          class="mag-img"
          :src="magnifierImgUrl"
          :alt="imgAlt"
          :style="{
            width: imgWidth + 'px',
            height: imgHeight + 'px',
          }"
        />
      </a>
      <!-- 静态图片 -->
      <a class="img-lk" :href="link">
        <img class="static-img" :src="magnifierImgUrl" :alt="imgAlt" />
      </a>
    </div>
  </div>
</template>

<script>
import { magnifier } from "../directives/index";

export default {
  name: "MyMagnifier",
  props: {
    imgWidth: {
      type: Number,
      default: 375,
    },
    imgHeight: {
      type: Number,
      default: 500,
    },
    blank: {
      type: Boolean,
      default: false,
    },
    magWidth: {
      type: Number,
      default: 150,
    },
    magHeight: {
      type: Number,
      default: 150,
    },
    link: String,
    magnifierImgUrl: String,
    imgAlt: String,
  },
  directives: {
    magnifier,
  },
};
</script>

<style lang="scss" scoped>
.wrapper {
  width: 375px;
  // margin: 10px auto;

  .img-wrap {
    position: relative;
    border: 1px solid #ddd;
    box-shadow: 0 0 5px #999;

    .mag-wrap {
      display: none;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2;
      background-color: #fff;
      box-shadow: 0 0 3px #ccc;
      cursor: move;
      overflow: hidden;

      &.show {
        display: block;
        transform: scale(1.5);
      }

      .mag-img {
        position: absolute;
        top: 0;
        left: 0;
      }
    }

    .img-lk {
      .static-img {
        width: 100%;
      }
    }
  }
}
</style>
